<template>
    <ul class="tab-ul">
        <div class="tab-outer">
            <li v-for="tab in tabs" :style="activeTab&&activeTab===tab.key?tabActiveStyle:tabStyle"
                @click="changeTab(tab.key)">{{tab.text}}
            </li>
        </div>


    </ul>
</template>

<script>
    export default {
        props: {
            tabs: Array,
            width: Number,
            fontSize: Number,
            backgroundColor: String,
            activeTab:String,
            activeColor:String
        },
        name: "MaiMaoTabs",
        data() {
            return {
                tabStyle: {
                    width: this.width + "px",
                    fontSize: this.fontSize + 'px',
                    color: 'black',
                    borderBottom: '1px solid ' + this.backgroundColor ? +this.backgroundColor : '#E4393C',
                    verticalAlign: 'center',
                },
                tabActiveStyle: {
                    height:'100%',
                    width: this.width + "px",
                    fontSize: this.fontSize + 'px',
                    color: this.activeColor?this.activeColor:'white',
                    background: this.backgroundColor ? this.backgroundColor : '#E4393C',
                    borderBottom: '1px solid ' + this.backgroundColor ? +this.backgroundColor : '#E4393C',
                    verticalAlign: 'center',
                }
            }
        },
        methods: {
            changeTab(tab) {
                this.$emit("activeTabChange", tab)
            }
        }
    }
</script>

<style scoped>
    .tab-ul {
        background: white;
        padding: 0px;
    }

    .tab-ul li {
        display: inline-block;
        list-style: none;
        height: 38px;
        width: 200px;
        font-size: 15px;
        position: relative;
        padding: 10px 25px;
        text-align: center;
        margin-bottom: 10px;

    }

    .tab-outer {
        cursor: pointer;
    }

    .tab-li {
        color: black;
        border-bottom: 1px solid #E4393C;
        vertical-align: center;
    }

    .tab-li :hover {
        cursor: pointer;
    }

    .tab-li-active {
        color: white;
        background: #E4393C;
        border-bottom: 1px solid #E4393C;
    }
</style>